<script setup>
import Profile from '../views/Profile.vue'
import Settings from '../views/Settings.vue'
import { useAuthStore } from '../stores/modules/auth'
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useSettingsStore } from '../stores/modules/settings'

const authStore = useAuthStore()
const settingsStore = useSettingsStore()

const router = useRouter()
const route = useRoute()

const menuItems = [
  { name: '对话', path: '/', icon: '💬' },
  { name: '历史记录', path: '/history', icon: '📚' },
  { name: '关于', path: '/about', icon: 'ℹ️' },
  { name: '设置', icon: '⚙️', path: '/settings' }
]

const handleMenuClick = (path) => {
  if (path === '/settings') {
    settingsStore.showSettingDialog()
  } else {
    router.push(path)
  }
}

// 判断菜单项是否激活
const isMenuItemActive = (itemPath) => {
  if (itemPath === '/') {
    // 对于根路径，只有当完全匹配时才激活
    return route.path === '/' || route.path === '/chat'
  }
  return route.path === itemPath
}

// 登录后默认选中对话页面
onMounted(() => {
  if (authStore.isAuthenticated && (route.path === '/' || route.path === '/chat')) {
    router.push('/')
  }
})
</script>

<template>
  <div class="sidebar">
    <div class="logo">AI Chat</div>
    <ul class="menu">
      <li v-for="item in menuItems" :key="item.path" @click="handleMenuClick(item.path)">
        <div class="menu-item" :class="{ active: isMenuItemActive(item.path) }">
          <span class="icon">{{ item.icon }}</span>
          {{ item.name }}
        </div>
      </li>
    </ul>
    <div class="bottom-section">
      <!-- <Settings ref="settingsRef" class="settings-item" v-if="false" /> -->
      <Profile v-if="authStore.isAuthenticated" />
    </div>
  </div>
  <Settings v-model="settingsStore.dialogVisible" />
</template>

<style scoped>
.sidebar {
  width: 250px;
  background: var(--color-background-soft);
  padding: 20px;
  border-right: 1px solid var(--el-border-color-lighter);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  color: var(--color-text);
}

.menu {
  list-style: none;
  padding: 0;
  flex: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: var(--menu-hover-bg);
  color: var(--menu-text-hover-color);
}

.menu-item.active {
  background-color: var(--menu-active-bg);
}

.icon {
  margin-right: 10px;
}

.bottom-section {
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 20px;
  margin-top: auto;
}

.settings-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-item:hover {
  background-color: var(--menu-hover-bg);
  color: var(--menu-text-hover-color);
}
</style>
